<script setup lang="ts">

import {Page} from "~/api/requestInstance";
import {recordPage} from "~/api/warehouse";
import {ImportPageVO, Result} from "~/api/responseResult";

import {WarningFilled, SuccessFilled} from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const router = useRouter()

const state: { tableData: Array<ImportPageVO>, loading: boolean, total: number, page: Page, tablePid: string, }
= reactive({
  tableData: [],
  loading: false,
  total: 0,
  page: {
    pageNo: 0,
    pageSize: 10
  },
  tablePid: ''
})

const handleClose = () => {
  dialogVisible.value = false
  state.page = {
    pageNo: 0,
    pageSize: 10
  }
  state.total = 0
  state.loading = false
  state.tableData = []
  state.tablePid = ''
}


const open = (data: any) => {
  dialogVisible.value = true
  if (data.tablePid) {
    state.tablePid = data.tablePid
  }
  getRecordPage();
}

const getRecordPage = async () => {
  state.loading = true
  const res: Result<Array<ImportPageVO>> = await recordPage({...state.page, tablePid: state.tablePid})
  state.loading = false
  if (res.success) {
    state.tableData = res.data
    state.total = res.total
  }
}

const pageFun = {
  handleSizeChange: (pageSize: number) => {
    state.page.pageSize = pageSize
    getRecordPage()
  },
  handleCurrentChange: (pageNo: number) => {
    state.page.pageNo = pageNo
    getRecordPage()
  }
}
/**
 * 跳转导入结果页面
 */
const jumpToImportResults = (importPageVO:ImportPageVO) => {
  if (importPageVO.operationType === "导入数据") {
    router.push("/import/result/" + importPageVO.pid);
  }
}

defineExpose({
  open,
  handleClose,
  state,
  pageFun,
  WarningFilled,
  SuccessFilled,
  jumpToImportResults
})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="操作记录"
      width="60%"
      :before-close="handleClose"
  >
    <div>
      <el-table :data="state.tableData" style="width: 100%;margin-top: 10px" v-loading="state.loading">
        <el-table-column prop="createUserName" label="操作人"/>
        <el-table-column prop="tableName" label="表格名称">
          <template #default="scope">
            <div style="cursor:pointer" @click="jumpToImportResults(scope.row)">
              <el-icon>
                <carbon-show-data-cards/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.tableName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operationType" label="操作类型"/>
        <el-table-column prop="importState" label="执行状态">
          <template #default="scope">
            <div>
              <el-icon v-if="scope.row.importState === '已完成' && scope.row.failedDataNum > 0" color="red">
                <WarningFilled />
              </el-icon>
              <el-icon v-if="scope.row.importState === '已完成' && scope.row.failedDataNum == 0" color="green">
                <SuccessFilled />
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.importState }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间"/>
      </el-table>

      <el-pagination
          style="margin-top: 10px;text-align: right"
          v-model:currentPage="state.page.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="state.page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.total"
          @size-change="pageFun.handleSizeChange"
          @current-change="pageFun.handleCurrentChange"
      >
      </el-pagination>
    </div>

  </el-dialog>
</template>
